<template>
  <u-popup
    :show="visible"
    mode="center"
    :round="20"
  >
    <view class="recommed_wrapper flex flex-y">
      <u--image
        src="/static/cloudAdopt/bg_recommend_cloud_pet.png"
        width="664rpx"
        height="154rpx"
        radius="24rpx"
      ></u--image>
      <view
        class="icon-close"
        @click="close"
      >
        <u-icon
          name="close"
          color="#000000"
          size="32rpx"
        ></u-icon>
      </view>
      <view class="recommed-content flex flex-y flex-center">
        <u--text
          :text="petDesc()"
          color="#333333"
          size="32rpx"
          bold="true"
        ></u--text>
        <view class="recommed-pet-wrapper flex">
          <block
            v-for="item in recommedInfo.petList"
            :key="item.id"
          >
            <view
              class="pet-item flex flex-y align-center"
              @click="toDetail(item)"
            >
              <u--image
                width="128rpx"
                height="128rpx"
                radius="12rpx"
                :src="item.avatar"
              ></u--image>
              <text class="u-line-1 nick-name">{{ item.nickName }}</text>
            </view>
          </block>
        </view>
        <view
          class="more-btn"
          @click="moreClick"
        >
          查看更多猫咪
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      value: false,
    },
    recommedInfo: {
      type: Object,
      value: () => {},
    },
    petName: {
      type: String,
      value: '',
    },
  },
  data() {
    return {};
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    close() {
      this.visible = false;
    },
    petDesc() {
      if (this.recommedInfo.petStatus === '2') {
        return `${this.petName}已被主人领养回家了！\n您可以考虑云认养其它小伙伴们呢～`;
      }
      if (this.recommedInfo.petStatus === '3') {
        return `${this.petName}已回归喵星了！感谢您曾经出现过，给它带来了许多快乐\n您可以考虑云认养其它小伙伴们呢～`;
      }
      if (this.recommedInfo.petStatus === '4') {
        return `${this.petName}还在被爱心人士云认养中哦！\n您可以考虑云认养其它小伙伴们呢～`;
      }
    },
    toDetail(item) {
      console.log('item', item);
      this.close();
      uni.navigateTo({
        url: `/pages/detail/index?id=${item.id}`,
      });
    },
    moreClick() {
      this.close();
      uni.switchTab({
        url: '/pages/index/index',
      });
    },
  },
};
</script>

<style lang="scss">
.recommed_wrapper {
  // position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-bottom: 64rpx;
  border-radius: 24rpx;
  width: 664rpx;
  .icon-close {
    position: absolute;
    padding: 20rpx;
    right: 0;
    top: 0;
  }
  .recommed-content {
    position: relative;
    left: 0;
    height: 100%;
    margin-top: -50rpx;
    .recommed-pet-wrapper {
      flex-wrap: wrap;
      width: 100%;
      margin: 40rpx 60rpx 70rpx 60rpx;
      .pet-item {
        width: 33.3%;
        margin-bottom: 30rpx;
        box-sizing: border-box;
        .nick-name {
          font-size: 24rpx;
          color: #333333;
          margin-top: 18rpx;
        }
      }
    }
    .more-btn {
      width: 380rpx;
      height: 76rpx;
      background: #ff7ce3;
      border-radius: 38rpx;
      text-align: center;
      font-weight: 600;
      line-height: 76rpx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
